// import { useSelector } from "react-redux"

import { Dropdown } from "antd";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import type { MenuProps } from "antd";
import { useNavigate } from "react-router-dom";
import { quit } from "../../store/userSlice/userSlice";
import { UserOutlined, LogoutOutlined } from "@ant-design/icons";
import Bg from "../bg";
const User = () => {
  const avator = useAppSelector((state) => state.user.userInfo.avator);
  const nickname = useAppSelector((state) => state.user.userInfo.nickname);
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const items: MenuProps["items"] = [
    {
      key: "/my",
      label: "我的资料",
      icon: <UserOutlined />,
      onClick({ key }) {
        navigate(key);
      },
    },
    {
      key: "/quit",
      label: "退出系统",
      icon: <LogoutOutlined />,
      onClick() {
        // 清除用户信息
        dispatch(quit());
      },
    },
  ];
  return (
    <Bg>
      <Dropdown menu={{ items }}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            color: "white",
            width: 120,
          }}
        >
          <img src={avator} alt="" height={40} />
          <span>{nickname}</span>
        </div>
      </Dropdown>
    </Bg>
  );
};

export default User;
